<template>
	<view>
		<TopNavCustom :title="title"></TopNavCustom>
		<view class="content">
			<text class="time">{{time}}</text>
			<view class="add-zone">
				<view class="add-form">
					<u-cell-group :border="false">
						<u-cell size="normal" title="问题类别" :value="listData.faultName">
						</u-cell>
						<view size="normal" v-if="listData.issuesType == 2 || listData.issuesType == 11">
							{{getValue(listData.issueTags)}}
						</view>
						<u-cell size="normal" title="问题部位" :value="listData.issueLocation">
						</u-cell>
						<u-cell size="normal" title="问题处理人" :value="listData.handlerUserId">
						</u-cell>
						<u-cell size="normal" title="发现时间" :value="listData.discoveryTime"></u-cell>
						<u-cell size="normal" title="预计处理时间" :value="listData.estimatedProcessingTime">
						</u-cell>
						<u-cell size="normal" title="问题描述" :border="false"></u-cell>
						<view class="pixs">
							<textarea :value="listData.issuesDesc" placeholder="请描述问题，最多输入200个字" disabled />
						</view>
						<u-cell size="normal" title="现场情况" :border="false"></u-cell>
						<view class="pixs">
							<div v-for="(img,i) in listData.pixs">
								<image :src="getSrc(img)" class="pix"></image>
							</div>

							<!-- todo:视频类处理 -->
						</view>
					</u-cell-group>
				</view>
			</view>
			<view class="add-zone" style="margin-top: 20rpx;">
				<view class="add-form">
					<view v-if="!isEdit && listData.issuesStatus !== 1">
						<u-cell-group :border="false">
							<u-cell size="normal" title="是否已整改：" :value="getStatus(listData.issuesStatus)">
							</u-cell>
							<u-cell size="normal" title="反馈描述" :border="false"></u-cell>
							<view class="pixs">
								<textarea :value="listData.feedBack" placeholder="请描述问题，最多输入200个字" disabled />
							</view>
							<u-cell size="normal" title="现场情况" :border="false"></u-cell>
							<view class="pixs">
								<div v-for="(img,i) in listData.pixs2">
									<image :src="getSrc(img)" class="pix"></image>
								</div>
							</view>
						</u-cell-group>
					</view>
					<u--form labelPosition="left" :model="listData" ref="refForm"
						v-if="isEdit || listData.issuesStatus === 1">
						<u-form-item>
							<u-cell-group :border="false">
								<u-cell size="normal" title="是否已整改：">
									<view slot="value">
										<u-radio-group v-model="issuesStatus" placement="row" activeColor=" #E62029">
											<u-radio :customStyle="{marginRight: '16px'}" size="30" label="是" name="2">
											</u-radio>
											<u-radio :customStyle="{marginRight: '16px'}" size="30" label="否" name="11">
											</u-radio>
										</u-radio-group>
									</view>
								</u-cell>
								<u-cell size="normal" title="反馈描述" :border="false"></u-cell>
								<view class="pixs">
									<textarea maxlength="200" v-model="feedBack" placeholder="请描述问题，最多输入200个字" />
								</view>
								<u-cell size="normal" title="现场情况" :border="false"></u-cell>
								<view class="pixs">
									<u-upload :fileList="fileList" @afterRead="afterRead" name="pix" :maxCount="9"
										width="188rpx" height="188rpx" :previewFullImage="true" multiple
										@delete="deletePic">
									</u-upload>
								</view>
							</u-cell-group>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		<view class="btns" v-if="listData.issuesStatus ===3 ">
			<button type="default" class="delete" @click="deleteRecord()">删除</button>
			<button type="default" class="edit" @click="output()">导出</button>
		</view>
		<view class="btns" v-if="listData.issuesStatus === 1 || isEdit ">
			<button type="default" class="edit" @click="goToPush()" style="width: 560rpx;">提交</button>
		</view>
		<view class="btns" v-if="listData.issuesStatus ===11 && !isEdit">
			<button type="default" class="delete" @click="deleteRecord()">删除</button>
			<button type="default" class="edit" @click="()=>isEdit=true">编辑</button>
		</view>
		<view class="btns" v-if="listData.issuesStatus ===4  && !isEdit">
			<button type="default" class="delete" @click="deleteRecord()">删除</button>
			<button type="default" class="edit" @click="()=>isEdit=true">重新编辑</button>
		</view>
		<u-modal @cancel="()=>showModal = false" :show="showModal" :title="modalTitle" :content='content'
			@confirm="confirm" :showCancelButton='true'>
		</u-modal>
	</view>
</template>

<script>
	import $C from '@/common/config.js'
	import _file from '@/common/file.js'
	import _question from "@/common/question.js"
	import _constant from "@/common/constant.js"
	export default {
		data() {
			return {
				isEdit: false,
				modalTitle: '删除记录',
				content: '是否确认删除记录',
				showModal: false,
				dateTime: Number(new Date()),
				time: uni.$u.timeFormat(false, 'yyyy-mm-dd'),
				listData: {},
				flag: 0,
				formList: [],
				columns: [],
				showEmpty: true,
				title: "",
				show: false,
				temp: {},
				fileList: [],
				feedBack: '',
				isExport: false,
				issuesStatus: '',
			};
		},
		onLoad(params) {
			let temp = JSON.parse(decodeURIComponent(params.item))
			this.listData = temp
			console.log(this.listData)

			this.title = temp.issueLocation
			if (typeof temp.issueImages == undefined || temp.issueImages == '') {
				this.listData.pixs = []
			} else {
				this.listData.pixs = temp.issueImages.split(',')
			}
			if (typeof this.listData.issueImages2 == undefined || this.listData.issueImages2 == '') {
				this.listData.pixs2 = []
			} else {
				this.listData.pixs2 = this.listData.issueImages2.split(',')
				console.log(this.listData)
				//照片回显
				let imgIdArray = this.listData.pixs2
				// this.fileList
				let _temp = []
				for (let i = 0; i < imgIdArray.length; i++) {
					let element = {
						status: 'success',
						message: '',
						urlId: imgIdArray[i]
					}
					element.url = $C.baseUrl + '/file/download?fileId=' + imgIdArray[i]

					_temp.push(element)
				}
				this.fileList = _temp
			}
		},
		methods: {
			getValue(value) {
				if (typeof value == undefined || value == null) {
					return ''
				} else {
					return value
				}
			},
			goToPush() {
				let flag = true
				let _form_data = this.listData
				if (this.feedBack == '') {
					uni.$showMsg('尚未输入反馈内容')
					flag = false
				} else if (this.fileList.length == 0) {
					uni.$showMsg('尚未上传现场图片')
					flag = false
				} else if (this.issuesStatus == '') {
					uni.$showMsg('尚未选择整改状态')
					flag = false
				}
				if (flag) {
					let cloneData = uni.$u.deepClone(this.listData)
					let pixs = []
					for (let j = 0; j < this.fileList.length; j++) {
						pixs.push(this.fileList[j].urlId)
					}
					cloneData.feedBack = this.feedBack
					cloneData.issueImages2 = pixs.toString()
					cloneData.issuesStatus = this.issuesStatus
					console.log(cloneData)
					if (_question.modQuestionStatus(cloneData)) {
						uni.$showMsg("修改成功")
						// this.goBack()
					} else {
						uni.$showMsg('提交失败')
					}
				}
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				uni.$showMsg("删除成功")
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId
					}))
					fileListLen++
				}
			},
			getSrc(id) {
				if ((typeof id) != undefined && id != '') {
					let _src = $C.baseUrl + '/file/download?fileId=' + id
					return _src
				}
			},
			getStatus(value) {
				console.log(value)
				if (this.listData.issueImages2 != null && value == 3) {
					return '是'
				} else {
					return '否'
				}
			},
			output() {
				this.isExport = true
				this.modalTitle = '导出记录'
				this.content = '是否确认导出记录'
				this.showModal = true
			},
			async confirm() {
				if (this.isExport) {
					let _push_form = {}
					_push_form.estateId = this.listData.estateId
					_push_form.issuesType = this.listData.issuesType
					_push_form.issuesStatus = this.listData.issuesStatus
					_push_form.estateIds = [this.listData.qualityId]
					const result = _constant.downloadURL(_push_form)
					if (result) {
						console.log(result)
						let path = _file.downloadAndSave(result)
						uni.$u.sleep(1000).then(() => {
							this.showModal = false
						})
						uni.$showMsg('请稍等...')
					}
				} else {
					const result = await _question.deleteQuestionRecord(this.listData.qualityId)
					if (result) {
						uni.$showMsg('删除成功！')
						this.showModal = false
						uni.$u.sleep(500).then(() => {
							uni.switchTab({
								url: '/pages/idata/data/data'
							})
						})
					}
				}
			},
			deleteRecord() {
				this.isExport = false
				this.modalTitle = '删除记录'
				this.content = '是否确认删除记录'
				this.showModal = true
			},
			goto() {
				uni.$u.sleep(1000).then(() => {
					uni.navigateBack({
						delta: 1
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 30rpx 58rpx 30rpx;
	}

	.add-zone {
		padding: 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.add-form {
		display: flex;
		flex-direction: column;

		.pixs {
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;

			.pix {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}

	.btns {
		margin-top: 88rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 95rpx;

		.next {
			width: 560rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.edit {
			width: 300rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
			box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 44rpx;
		}

		.delete {
			width: 300rpx;
			background: #FFFFFF;
			border: 2rpx solid #E62029;
			border-radius: 44rpx;
			color: #E62029;
			// width: 560px
		}
	}
</style>
